<template>
  <view class="contain-cart">

    <view class="contain-cart-main">
      <uni-swipe-action>
        <view class="cart-home" v-for="(obj,j) in cart" v-bind:key="j">
          <view class="cart-tip" @click="gotoMapShop(obj.Class_id)">
            <uni-icons custom-prefix="custom-icon" type="shop" size="22"></uni-icons><text
              class="cart-tip-name">{{`${obj.Class_Parent.Class_parent_name}/${obj.Class_name}`}}</text>
          </view>
          <block v-for="(item,i) in obj.Goods" v-bind:key="i">
            <uni-swipe-action-item :right-options="options" @click="swipeActionClickHandler(item)">
              <view class="contain-cart-item">
                <view class="goods-item-left">
                  <radio :checked="item.isCheck" color="#FFA000" @click="changeCheck(item.Goods_id)"></radio>
                  <image v-bind:src="item.Goods_imgPath" @click.self="gotoDetail(item)"></image>
                </view>
                <view class="goods-item-right">
                  <view class="goods-item-name">
                    {{item.Goods_disName}}
                  </view>
                  <view class="goods-item-desc">
                    {{item.Goods_profile}}
                  </view>
                  <!--  <view class="icon-show">
                          8折优惠
                        </view> -->
                  <view class="price-number">
                    <text>{{item.Goods_price}}</text>
                    <uni-number-box :min="1" disabled v-model="item.Goods_amount" @plus="plusFn(item)"
                      @minus="minusFn(item)">
                    </uni-number-box>
                  </view>
                </view>
              </view>
            </uni-swipe-action-item>

          </block>

        </view>
      </uni-swipe-action>



    </view>
    <view class="userAction">
      <view class="priceCount">
        <label class="radio" @click="changeAllState">
          <radio value="" color="#FFA000" :checked="isFullCheck" /><text>全选</text>
        </label>
        <view class="amount-box">
          合计:<text class="amount">￥{{checkedGoodsAmount}}</text>
        </view>
      </view>
      <view class="remove-btn remove-btn-all" v-if="checkTotal>0" @click="gotoOrderDetail">
        去结算({{checkTotal}})
      </view>

      <view class="remove-btn remove-btn-no" v-if="checkTotal == 0">
        去结算({{checkTotal}})
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapActions,
    mapState,
    mapGetters,
    mapMutations
  } from 'vuex'
  import badgeMix from '@/mixins/tabbar-badge.js'
  import checkLogin from '@/mixins/checkLogin.js'
  export default {
    data() {
      return {
        options: [{
          text: '删除', // 显示的文本内容
          style: {
            backgroundColor: '#C00000' // 按钮的背景颜色
          }
        }],
        info: '',
        Bid: 65,
        userId: 0,
        signMd5: '',
        isFullCheck: false
      };
    },
    mixins: [badgeMix, checkLogin],
    computed: {
      ...mapState("m_cart", [
        "cart"
      ]),
      ...mapGetters("m_cart", [
        "checkedGoodsAmount",
        "checkTotal",
        "dataCode"
      ])
    },
    onShow() {
      if (uni.getStorageSync('token') && uni.getStorageSync('userinfo') && JSON.parse(uni.getStorageSync('userinfo'))
        .userId > 0) {
        this._querywebcartgoods();
        this.updateAllGoodsState(false);
        this.isFullCheck = false;
      } else {
        this.seconds = 3;
        this.delayNavigate();
      }
    },
    methods: {
      ...mapMutations('m_cart', ['updateAllGoodsState', 'updataSignGoodsStatus']),
      ...mapActions("m_cart", ["_querywebcartgoods", "RemoveWebCartGoods", "DeductWebCartGoods", "AddWebCartGoods"]),
      plusFn(item) {
        console.log(item.Goods_id)
        this.isFullCheck = false;
        this.AddWebCartGoods({
          beGivenUserId: item.BeGiven_userid,
          goodsId: item.Goods_id,
          count: 1
        });
      },
      minusFn(item) {
        this.isFullCheck = false;
        console.log('lyl', item.Goods_id)
        this.DeductWebCartGoods({
          beGivenUserId: item.BeGiven_userid,
          goodsId: item.Goods_id
        });
      },
      swipeActionClickHandler(item) {
        this.isFullCheck = false;
        console.log(item)
        const obj = {
          beGivenUserId: item.BeGiven_userid,
          goodsId: item.Goods_id
        }
        this.RemoveWebCartGoods(obj)
      },
      gotoDetail(item) {
        console.log('d77', item)
        uni.navigateTo({
          url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.Goods_id
        })
      },
      gotoMapShop(cid) {
        const dotaArr = [69, 70, 92, 135, 193, 230, 233, 281, 284, 313, 384, 476, 488, 489, 1904];
        const imbaArr = [18, 19, 20];
        const ptArr = [7, 11, 93, 95, 97, 435, 583, 592, 22, 23, 24, 59, 60];
        console.log(dotaArr.indexOf(cid))
        if (dotaArr.indexOf(cid) >= 0) {
          return uni.navigateTo({
            url: '/subpkg/dota_view/dota_view'
          })
        } else if (imbaArr.indexOf(cid) >= 0) {
          return uni.navigateTo({
            url: '/subpkg/imba_view/imba_view'
          })

        } else if (ptArr.indexOf(cid) >= 0) {
          return uni.navigateTo({
            url: '/subpkg/pt_view/pt_view'
          })
        } else {
          return uni.navigateTo({
            url: '/subpkg/rpg_view/rpg_view?cid=' + cid
          })
        }
      },
      changeAllState() {
        // 修改购物车中所有商品的选中状态
        // !this.isFullCheck 表示：当前全选按钮的状态取反之后，就是最新的勾选状态
        this.isFullCheck = !this.isFullCheck
        this.updateAllGoodsState(this.isFullCheck)
      },
      gotoOrderDetail() {
        this.seconds = 3;
        if (uni.getStorageSync('token') && uni.getStorageSync('userinfo') && JSON.parse(uni.getStorageSync('userinfo'))
          .userId > 0) {
          uni.navigateTo({
            url: '/subpkg/order_view/order_view'
          })
        } else {
          this.delayNavigate();
        }

      },
      changeCheck(goodsid) {
        this.updataSignGoodsStatus(goodsid);
        // console.log(this.dataCode)
        const ltsTrue = [];
        this.cart.forEach(x => x.Goods.forEach(y => {
          ltsTrue.push(y.isCheck)
        }))
        if (ltsTrue.indexOf(false) != -1) {
          this.isFullCheck = false;
        } else {
          this.isFullCheck = true;
        }
      }

    }
  }
</script>

<style lang="scss">
  .contain-cart {
    padding-bottom: 90rpx;
  }

  .cart-title {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-left: 20rpx;
    background-color: #FFFFFF;
    border-bottom: 1px solid #efefef;
    position: fixed;
    top: 0px;
    z-index: 1;

    .cart-title-text {
      margin-left: 10px;
    }
  }

  .contain-cart-main {
    width: 710rpx;
    padding-top: 20rpx;
    margin: 0 auto;
    overflow: hidden;
    zoom: 1;

    .cart-home {
      width: 710rpx;
      border-radius: 12rpx;
      overflow: hidden;
      zoom: 1;
      margin-bottom: 20rpx;

      .cart-tip {
        width: 690rpx;
        height: 100rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        background-color: #fff;
        padding: 0 20rpx;

        .cart-tip-name {
          margin-left: 13rpx;
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #000000;
        }
      }

      .contain-cart-item {
        background-color: #FFFFFF;
        width: 678rpx;
        padding: 36rpx 16rpx;
        display: flex;
        justify-content: flex-start;

        .goods-item-left {
          width: 250rpx;
          height: 184rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;

          radio {
            height: 184rpx;
            line-height: 184rpx;
          }

          image {
            width: 184rpx;
            height: 184rpx;
            border-radius:8rpx;
          }
        }

        .goods-item-right {
          width: 390rpx;
          padding-left: 20rpx;
          height: 184rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .goods-item-name {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #1A1A1A;
            margin-bottom: 10rpx;
          }

          .goods-item-desc {
            width: 349rpx;
            margin-bottom: 10rpx;
            font-size: 20rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
          }

          .icon-show {
            width: 88rpx;
            height: 28rpx;
            line-height: 28rpx;
            text-align: center;
            background: linear-gradient(90deg, #EE8924 0%, #EC632B 100%);
            border-radius: 4px;
            font-size: 20rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
          }

          .price-number {
            width: 100%;
            display: flex;
            justify-content: space-between;

            text {
              font-size: 30rpx;
              font-family: PingFang SC;
              font-weight: bold;
              color: #E33F2A;
            }
          }
        }
      }
    }


  }

  .userAction {
    width: 674rpx;
    height: 90rpx;
    line-height: 90rpx;
    background: #FFFFFF;
    border-bottom: 1px solid #efefef;
    position: fixed;
    bottom: 0px;
    padding: 0 38rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .priceCount {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;

      .amount-box {
        font-size: 22rpx;
        font-family: PingFang SC;
        color: #000000;
        margin-left: 10rpx;
        line-height: 80rpx;

        .amount {
          font-weight: bold;
          font-size: 26rpx;
        }
      }
    }

    .radio {
      font-size: 22rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #000000;
    }

    .remove-btn {
      width: 198rpx;
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
      border: 2rpx solid #DCDCDC;
      border-radius: 32rpx;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #E33F2A;
    }

    .remove-btn-all {
      width: 198rpx;
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
      background-color: #E33F2A;
      border: 2rpx solid #E33F2A;
      border-radius: 32rpx;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #fff;
    }

    .remove-btn-no {
      width: 198rpx;
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
      background-color: #ccc;
      border: 2rpx solid #ccc;
      border-radius: 32rpx;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #fff;
    }
  }
</style>
